<script setup>
	import {
		ref,
		reactive,
		onMounted
	} from 'vue'
	import {
		onLoad
	} from '@dcloudio/uni-app'
	import {
		hotAddress
	} from '@/data/mock/hotAddress.js'

	// 地图中心点
	const mapCenter = reactive({
		latitude: 39.909,
		longitude: 116.39742
	})

	// 地图标记点
	const markers = ref([{
		id: 1,
		latitude: 39.909,
		longitude: 116.39742,
		iconPath: '/static/images/location.png',
		width: 30,
		height: 30
	}])

	// 位置列表数据
	const locationList = ref([])

	// 搜索文本
	const searchText = ref('')

	// 当前选中位置索引
	const selectedIndex = ref(-1)

	// 当前选中位置
	const selectedLocation = ref(null)

	// 初始化位置数据
	const initLocationData = () => {
		// 模拟数据，实际应用中可以从接口获取
		locationList.value = hotAddress
		// 默认选中第一个
		if (locationList.value.length > 0) {
			handleSelectLocation(0)
		}
	}
	// 获取当前位置
	const getCurrentLocation = async () => {
		try {
			// 1. 检查权限
			const settingRes = await uni.getSetting()
			if (!settingRes.authSetting['scope.userLocation']) {
				await uni.authorize({
					scope: 'scope.userLocation'
				})
			}

			// 2. 获取位置
			const res = await uni.getLocation({
				type: 'gcj02',
				isHighAccuracy: true
			})

			mapCenter.latitude = res.latitude
			mapCenter.longitude = res.longitude

			// 更新标记点
			markers.value = [{
				id: 1,
				latitude: res.latitude,
				longitude: res.longitude,
				iconPath: '/static/images/location.png',
				width: 30,
				height: 30
			}]

			// 添加到位置列表
			const isExist = locationList.value.some(item => item.name === '我的位置')
			if (!isExist) {
				locationList.value.unshift({
					id: Date.now(),
					name: "我的位置",
					address: "当前位置",
					latitude: res.latitude,
					longitude: res.longitude
				})
			}
			// 选中当前位置
			handleSelectLocation(0)
		} catch (err) {
			console.error('获取位置失败:', err)
			if (err.errMsg.includes('auth deny')) {
				showAuthModal()
			} else {
				uni.showToast({
					title: '获取位置失败',
					icon: 'none'
				})
			}
		}
	}

	// 处理选择位置
	const handleSelectLocation = (index) => {
		selectedIndex.value = index
		const location = locationList.value[index]
		selectedLocation.value = location

		mapCenter.latitude = location.latitude
		mapCenter.longitude = location.longitude

		markers.value = [{
			id: 1,
			latitude: location.latitude,
			longitude: location.longitude,
			iconPath: '/static/images/location.png',
			width: 30,
			height: 30
		}]
	}

	// 处理搜索
	const handleSearch = () => {
		if (!searchText.value.trim()) return

		// 模拟搜索
		uni.showLoading({
			title: '搜索中...'
		})

		setTimeout(() => {
			// 模拟搜索结果
			const mockResults = [{
					id: 100 + locationList.value.length,
					name: `${searchText.value}大厦`,
					address: `深圳市${searchText.value}区${searchText.value}路`,
					latitude: mapCenter.latitude + 0.005,
					longitude: mapCenter.longitude + 0.005
				},
				{
					id: 101 + locationList.value.length,
					name: `${searchText.value}广场`,
					address: `深圳市${searchText.value}区${searchText.value}路`,
					latitude: mapCenter.latitude - 0.005,
					longitude: mapCenter.longitude - 0.005
				}
			]

			locationList.value = mockResults
			if (locationList.value.length > 0) {
				handleSelectLocation(0)
			}

			uni.hideLoading()
		}, 1000)
	}

	// 清除搜索
	const handleClearSearch = () => {
		initLocationData()
	}

	// 确认选择
	const handleConfirm = () => {
		if (!selectedLocation.value) {
			uni.showToast({
				title: '请先选择一个位置',
				icon: 'none'
			})
			return
		}

		// 返回选择的位置信息
		uni.$emit('Address', selectedLocation.value)
		uni.navigateBack()
	}
	//返回上一页
	const back = () => {
		uni.navigateBack({
			delta: 1
		})
	}
	// 初始化
	onMounted(() => {
		initLocationData()
		getCurrentLocation()
	})
</script>

<template>
	<uni-nav-bar :fixed="true" background-color="#ffffff" title="漳州城际出行" color="black" status-bar :border="false" />
	<view class="topPart">
		<!-- 确认按钮 -->
		<view class="fixed">
			<text @click="back">取消</text>
			<text @click="handleConfirm">确定</text>
		</view>
		<!-- 搜索栏 -->
		<view class="search-bar">
			<uni-search-bar v-model="searchText" placeholder="搜索地点" @confirm="handleSearch"
				@clear="handleClearSearch" />
		</view>
	</view>
	<view class="container">
		<!-- 地图容器 -->
		<view class="map-container">
			<map id="myMap" :latitude="mapCenter.latitude" :longitude="mapCenter.longitude" :markers="markers"
				:scale="16" show-location class="map"></map>
		</view>

		<!-- 位置列表 -->
		<scroll-view class="location-list" scroll-y>
			<view v-for="(item, index) in locationList" :key="index" class="location-item"
				:class="{ active: selectedIndex === index }" @click="handleSelectLocation(index)">
				<view class="location-name">{{ item.name }}</view>
				<view class="location-address">{{ item.address }}</view>
			</view>
		</scroll-view>


	</view>
</template>

<style lang="scss" scoped>
	@import '../../styles/_rpx.scss';

	uni-nav-bar {
		font-weight: bold;
	}

	.topPart {
		display: flex;
		flex-direction: column;

		.fixed {
			display: flex;
			justify-content: space-between;
			padding: rpx(8);
			background-color: #ffffff;

			text {
				font-size: rpx(13);
				margin: auto rpx(10);
			}
		}

		.search-bar {
			background-color: #ffffff;

			uni-search-bar {
				width: rpx(364);
				height: rpx(40);
			}
		}
	}

	.container {
		display: flex;
		flex-direction: column;
		height: auto;
		background-color: #f5f5f5;
	}

	.map-container {
		height: rpx(286);
		width: 100%;
	}

	.map {
		width: 100%;
		height: 100%;
	}

	.location-list {
		flex: 1;
		background: #fff;
	}

	.location-item {
		padding: rpx(12) rpx(15);
		border-bottom: rpx(1) solid #e6e6e6;
	}

	.location-item.active {
		background-color: pink;
	}

	.location-name {
		font-size: rpx(16);
		margin-bottom: rpx(5);
	}

	.location-address {
		font-size: rpx(12);
		color: #999;
	}
</style>